<template>
	<view>
	
	<view class="dabox">
		
		<view class="hbng">
			<view class="iconk" @click="clepop"></view>
			<view class="xuanzh">选择档期</view>
		</view>
		<view class="xbox">
			<view class="xbtn">
				<image class="ximg hnjm" :src="icon.leftJianIcon" mode=""></image>
			</view>
			<view class="txtc">
				2022
				<view class="xm">年</view>
				10
				<view class="xm">月</view>
			</view>
			<view class="xbtn">
				<image class="ximg" :src="icon.leftJianIcon" mode=""></image>
			</view>
		</view>
			
		
		<view class="time_box">
			<view class="tbox">
				<view class="riq">
					<view class="rbtn" v-for="(item,i) in weekList" :key='i'>{{item.txt}}</view>
				</view>
				
				<view class="qir">
					<view class="qbtn" >
						<view class="ri mkl">28</view>
						
					</view>
					<view class="qbtn" >
						<view class="ri mkl">29</view>
						
					</view>
					<view class="qbtn">
						<view class="ri mkl">30</view>
						
					</view>
					<view class="qbtn" :class="{xuank:xhb==i}" v-for="(item,i) in list" :key='i' @click="chank(item,i)">
						<view class="ri" :class="{man:item.type=='满'}">{{item.date}}</view>
						<view class="tai" :class="{man:item.type=='满',xiu:item.type=='休'}">{{item.type}}</view>
					</view>
					<view class="qbtn">
						<view class="ri mkl">1</view>
						
					</view>
				</view>
				
				
			</view>
		</view>
		
		
		<view class="yuye" :class="{mei:false}" @click="yueenter">确定</view>
	</view>
	
	
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				weekList: [{
						txt: '日'
					},
					{
						txt: '一'
					},
					{
						txt: '二'
					},
					{
						txt: '三'
					},
					{
						txt: '四'
					},
					{
						txt: '五'
					},
					{
						txt: '六'
					}
				],
				list: [{
						date: '1',
						type: '满'
					},
					{
						date: '2',
						type: '空'
					},
					{
						date: '3',
						type: '空'
					},
					{
						date: '4',
						type: '空'
					},
					{
						date: '5',
						type: '满'
					},
					{
						date: '6',
						type: '满'
					},
					{
						date: '7',
						type: '空'
					},
					{
						date: '8',
						type: '满'
					},
					{
						date: '9',
						type: '空'
					},
					{
						date: '10',
						type: '满'
					},
					{
						date: '11',
						type: '空'
					},
					{
						date: '12',
						type: '满'
					},
					{
						date: '13',
						type: '空'
					},
					{
						date: '14',
						type: '空'
					},
					{
						date: '15',
						type: '空'
					},
					{
						date: '16',
						type: '空'
					},
					{
						date: '17',
						type: '空'
					},
					{
						date: '18',
						type: '空'
					},
					{
						date: '19',
						type: '满'
					},
					{
						date: '20',
						type: '空'
					},
					{
						date: '21',
						type: '满'
					},
					{
						date: '22',
						type: '空'
					},
					{
						date: '23',
						type: '空'
					},
					{
						date: '24',
						type: '空'
					},
					{
						date: '25',
						type: '满'
					},
					{
						date: '26',
						type: '空'
					},
					{
						date: '27',
						type: '空'
					},
					{
						date: '28',
						type: '空'
					},
					{
						date: '29',
						type: '空'
					},
					{
						date: '30',
						type: '满'
					},
					{
						date: '31',
						type: '空'
					}
				],
				year: '',
				month: '',
				typeList: [{
					txt: '空'
				}, {
					txt: '休'
				}, {
					txt: '满'
				}],
				typeIndex: 0,
				xhb:-1,
			}
		},
		computed: {
			...mapState(['icon'])
		},
		onLoad() {
			
		},
		mounted() {
			this.getDate()
		},
		methods: {
			getDate() {
				let date = new Date()
				this.year = date.getFullYear()
				this.month = date.getMonth() + 1
			},
			chank(e,k){
				this.xhb=k;
			},
			edit(item) {
				if (item.type == '空') {
					
					this.$refs['popup'].open()
				} else {
					uni.showToast({
						title: '该档期已满!',
						icon: 'none',
						duration: 2000,
					})
				}
				if (item.type == '空') {
					this.typeIndex = 0
				} else if (item.type == '休') {
					this.typeIndex = 1
				} else {
					this.typeIndex = 2
				}
			},
			active(index) {
				this.typeIndex = index
			},
			closec(){
				this.$emit('close')
			},
			yueenter(){
				this.$emit('enterselect')
			},
			close() {
				
				this.$refs['popup'].close()
			},
			clepop(){
				this.$emit('clepop')
			}
		}
	}
</script>

<style scoped lang="scss">
	.dabox{
		background: #fff;
		border-radius: 32upx 32upx 0 0;
		padding-bottom:68upx;
	}
.headk{
	height:88upx;
	position: relative;
	.namkl{
		position: absolute;
		left:32upx;
		top:20upx;
		font-size:36upx;
		color:#fff;
	}
	.txty{
		color:#fff;
		text-align: center;
		font-size:32upx;
		height:88upx;
		line-height: 88upx;
	}
}
.hbng{
	width: 750upx;
	height: 100upx;
	background: linear-gradient(180deg, #FFF7EA 0%, rgba(255,255,255,0) 100%);
	border-radius: 32upx 32upx 0 0;
	position: relative;
	.iconk{
		width:36upx;
		height:36upx;
		background: url(@/static/tab_jian.png)no-repeat center;
		background-size:100%;
		position: absolute;
		left:36upx;
		top:30upx;
	}
	.xuanzh{
		text-align: center;
		height:100upx;
		color:#111;
		font-size:30upx;
		line-height: 100upx;
	}
}
.xbox{
	width:686upx;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	margin-top:10upx;
	.xbtn{
		width:62upx;
		height:62upx;
		border-radius: 31upx;
		text-align: center;
		border: 2upx solid #6E6F71;
		.ximg{
			width:30upx;
			height:30upx;
			margin-top:16upx;
			&.hnjm{
				transform: rotateZ(180deg);
			}
		}
	}
	.txtc{
		width:300upx;
		text-align: center;
		color:#111;
		font-size:44upx;
		font-weight: 550;
		height:62upx;
		line-height: 62upx;
		.xm{
			display: inline-block;
			color:#999999;
			font-size:24upx;
			
		}
	}
}

.time_box{
	width:100%;
	margin:0 auto;
	background: #F4F4F4;
	margin-top:40upx;
	padding:30upx 0;
	border-radius: 28upx;
	.tbox{
		width:686upx;
		margin:0 auto;
		.riq{
			width:100%;
			display: flex;
			justify-content: space-between;
			.rbtn{
				width:72upx;
				text-align: center;
				color:#111;
				font-size:32upx;
				height:70upx;
				line-height: 70upx;
			}
		}
		.qir{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.qbtn{
				width:72upx;
				text-align: center;
				margin-top:40upx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				height:100upx;
				&.xuank{
					width: 72upx;
					height: 100upx;
					background: linear-gradient(180deg, #333333 0%, #111111 100%);
					box-shadow: 0px 8upx 20upx 0px rgba(0,0,0,0.2);
					border-radius: 24upx;
					.ri{
						color:#fff;
						&.man{
							color:#fff;
						}
					}
					.tai{
						color:#fff;
						&.man{
							color:#fff;
						}
					}
				}
				.ri{
					color:#111;
					font-size:32upx;
					font-weight: 550;
					margin-top:10upx;
					&.man{
						color:#111;
					}
					&.mkl{
						color:#CCCCCC;
					}
				}
				.tai{
					color:#111;
					font-size:24upx;
					margin-bottom:10upx;
					&.man{
						color:#FF3F4A;
					}
					&.xiu{
						color:#6E6F71;
					}
				}
			}
		}
	}
}
.yuye{
	width: 686upx;
	height: 80upx;
	background: #111;
	border-radius: 40upx;
	text-align: center;
	line-height: 80upx;
	color:#fff;
	font-size:30upx;
	margin:0 auto;
	margin-top:60upx;
	&.mei{
		background: #999999;
	}
}
</style>
<style>

</style>
